<template>
  <div>
    <div v-if="tasks.length > 0" class="task-table">
      <el-table :data="tasks" style="width: 100%" row-key="id" @expand-change="handleExpand">
        <!-- 展开列 -->
        <el-table-column type="expand" width="50">
          <template #default="{ row }">
            <!-- 子任务表格 -->
            <el-table :data="subtasks[row.id]" class="subtask-table"
              style="margin-left: 20px; width: calc(100% - 20px)">
              <el-table-column prop="name" label="子任务名称" width="180">
                <template #default="{ row: subRow }">
                  <el-icon>
                    <Document />
                  </el-icon>
                  {{ subRow.name }}
                </template>
              </el-table-column>
              <!-- 其他子任务列保持原样 -->
              <el-table-column prop="description" label="描述" width="180">
              </el-table-column>
              <el-table-column prop="priority" label="优先级" width="80">
                <template #default="{ row }">
                  <el-tag :type="getPriorityColor(row.priority)" effect="dark">
                    {{ getPriorityLabel(row.priority) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="start_time" label="开始时间" width="180">
              </el-table-column>
              <el-table-column prop="end_time" label="结束时间" width="180">
              </el-table-column>
              <el-table-column prop="grade" label="计划价值" width="80">
              </el-table-column>
              <el-table-column prop="performanceVO.valueSum" label="实际价值" width="80">
              </el-table-column>
              <el-table-column prop="appraiser_id" label="负责人" width="80">
                <template #default="{ row }">
                  <span>{{ getEmployeeName(row.appraiser_id) || '未分配' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="members_names" label="参与人" width="200">
                <template #default="{ row }">
                  <div>
                    <el-tag v-for="(member, index) in row.members" :key="index" style="margin: 2px;">
                      {{ member.name }}
                    </el-tag>
                  </div>
                </template>
              </el-table-column>
              <!-- ... -->
              <el-table-column label="操作" width="220">
                <template #default="{ row: subRow }">
                  <el-button type="primary" plain @click="viewDetails(subRow)">查看</el-button>
                  <el-button type="primary" plain @click="openEvaluateDialog(subRow)">评价</el-button>
                  <el-button type="success" plain @click="openReportDialog(subRow)">填报</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>

        <!-- 父任务列保持原样 -->
        <el-table-column prop="name" label="任务名称" width="180">
          <template #default="{ row }">
            <el-icon>
              <Folder />
            </el-icon>
            {{ row.name }}
          </template>
        </el-table-column>
        <!-- ...其他父任务列... -->
        <el-table-column prop="description" label="描述" width="180">
        </el-table-column>
        <el-table-column prop="priority" label="优先级" width="80">
          <template #default="{ row }">
            <el-tag :type="getPriorityColor(row.priority)" effect="dark">
              {{ getPriorityLabel(row.priority) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="start_time" label="开始时间" width="180">
        </el-table-column>
        <el-table-column prop="end_time" label="结束时间" width="180">
        </el-table-column>
        <!-- 进度列 -->
        <el-table-column label="进度" width="200">
          <template #default="{ row }">
            <el-progress :percentage="row.taskScheduleVO.progress"
              :color="progressColor(row.taskScheduleVO.progress)"></el-progress>
          </template>
        </el-table-column>
        <el-table-column prop="grade" label="计划价值" width="80">
        </el-table-column>
        <el-table-column prop="performanceVO.valueSum" label="实际价值" width="80">
        </el-table-column>
        <el-table-column prop="appraiser_id" label="负责人" width="80">
          <template #default="{ row }">
            <span>{{ getEmployeeName(row.appraiser_id) || '未分配' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="members_names" label="参与人" width="200">
          <template #default="{ row }">
            <div>
              <el-tag v-for="(member, index) in row.members" :key="index" style="margin: 2px;">
                {{ member.name }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220">
          <template #default="{ row }">
            <el-button type="primary" plain @click="viewDetails(row)">查看</el-button>
            <el-button type="primary" plain @click="openDialog(row)">分解</el-button>
            <el-button type="success" plain @click="openReportDialog(row)">填报</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <p v-else>暂无任务记录。</p>

    <!-- 创建任务的按钮 -->
    <el-button @click="openDialog()" class="create-task-button">创建任务</el-button>

    <el-dialog v-model="dialogVisible" title="创建任务" width="80%">
      <el-form :model="taskForm" :rules="createTaskRules" label-width="120px">
        <el-row :gutter="20">
          <!-- 左列 -->
          <el-col :span="12">
            <el-form-item label="任务名称" prop="name">
              <el-input v-model="taskForm.name"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="description">
              <el-input type="textarea" :rows="4" v-model="taskForm.description"></el-input>
            </el-form-item>
            <el-form-item label="开始时间" prop="start_time">
              <el-date-picker type="datetime" placeholder="选择日期时间" v-model="taskForm.start_time"
                style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="end_time">
              <el-date-picker type="datetime" placeholder="选择日期时间" v-model="taskForm.end_time"
                style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="负责人" prop="appraiser_id">
              <el-select v-model="taskForm.appraiser_id" placeholder="请选择负责人" style="width: 100%;"
                @focus="fetchEmployees">
                <el-option v-for="employee in employees" :key="employee.id" :label="employee.name" :value="employee.id">
                  <span>{{ employee.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 右列 -->
          <el-col :span="12">
            <el-form-item label="优先级" prop="priority">
              <el-select v-model="taskForm.priority" placeholder="请选择优先级" style="width: 100%;">
                <el-option label="高" value="1"></el-option>
                <el-option label="中" value="2"></el-option>
                <el-option label="低" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建人" prop="creator_id">
              <el-input v-model="taskForm.creator_name" disabled placeholder="此字段不可编辑"></el-input>
            </el-form-item>
            <el-form-item label="计划价值" prop="grade">
              <el-input v-model="taskForm.grade"></el-input>
            </el-form-item>
            <el-form-item label="权重" prop="weight">
              <el-input v-model="taskForm.weight" :placeholder="`剩余权重：${taskForm.residual_weight}`" type="number"
                @input="handleWeightInput"></el-input>
            </el-form-item>
            <el-form-item label="工作量" prop="workload">
              <el-input v-model="taskForm.workload"></el-input>
            </el-form-item>
            <el-form-item label="成员" prop="members">
              <div>
                <el-tag v-for="member in taskForm.members" :key="member">{{ member }}</el-tag>
                <el-select v-model="taskForm.members" multiple placeholder="请选择成员" style="margin-left: 10px;"
                  @focus="fetchEmployees">
                  <el-option v-for="employee in employees" :key="employee.id" :label="employee.name"
                    :value="employee.id">
                    <span>{{ employee.name }}</span>
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 评价任务的弹窗 -->
    <el-dialog v-model="EvaluateDialogVisible" title="评价任务" width="50%">
      <el-form :model="evaluateTaskForm" :rules="evaluateTaskRules" label-width="120px">
        <el-form-item label="评价" prop="evaluation">
          <el-input v-model="evaluateTaskForm.evaluation"></el-input>
        </el-form-item>
        <el-form-item label="评价人" prop="appraiser_name">
          <el-input v-model="evaluateTaskForm.appraiser_name" disabled placeholder="此字段不可编辑"></el-input>
        </el-form-item>
        <el-form-item label="评分" prop="score">
          <el-input v-model="evaluateTaskForm.score"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitEvaluateForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 查看任务详情的弹窗 -->
    <el-dialog v-model="detailsDialogVisible" title="任务详情" width="60%">
      <pre class="details-pre">{{ details }}</pre>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailsDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 填报弹窗 -->
    <el-dialog v-model="reportDialogVisible" title="任务填报" width="50%">
      <el-form :model="reportForm" :rules="reportRules" ref="reportFormRef" label-width="120px">
        <el-form-item label="任务状态" prop="status">
          <el-radio-group v-model="reportForm.status">
            <el-radio :value="0">未完成</el-radio>
            <el-radio :value="1">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="完成情况" prop="content">
          <el-input type="textarea" v-model="reportForm.content" placeholder="请填写任务完成情况"></el-input>
        </el-form-item>
        <el-form-item label="上传附件">
          <el-upload ref="upload" action="" :auto-upload="false" :on-change="handleFileChange" :limit="1"
            :show-file-list="true" accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png">
            <el-button type="primary" class="custom-upload-button">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">只能上传PDF、Word、Excel、图片文件，且不超过5MB</div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeReportDialog">取消</el-button>
          <el-button type="primary" @click="submitReport">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, toRaw } from 'vue'
import axios from '../../api/axios.js'
import { ElMessage } from 'element-plus'
import { useProjectStore, getProject } from '../../store/projectStore.js'
import { useCookies } from "vue3-cookies"

const { cookies } = useCookies();

const dialogVisible = ref(false)
const EvaluateDialogVisible = ref(false)
const tasks = ref([]) // 存储所有任务的数组
const detailsDialogVisible = ref(false);
const details = ref('');
const params = defineProps(['projectId', 'projectName'])
const subtasks = ref({});
const employees = ref([]);
const reportFormRef = ref(null); // 表单引用
const projectStore = ref([])

const taskForm = reactive({
  name: '',
  description: '',
  start_time: null,
  end_time: null,
  creator_id: '',
  creator_name: '', // 新增属性来显示创建人的名字
  appraiser_id: '',
  grade: '',
  priority: '',
  weight: '',
  workload: '',
  parent_id: 0,
  project_id: params.projectId,
  members: [],
  residual_weight: 0
});

// 展开行变化时的处理
async function handleExpand(row, expandedRows) {
  if (expandedRows.some(e => e.id === row.id)) {
    // 获取子任务数据
    await fetchsubtasks(row.id);
  }
}

const evaluateTaskForm = reactive({
  task_id: '',
  appraiser_name: cookies.get("name"),
  description: '',
  grade: '',
});

// 定义数据模型
const reportDialogVisible = ref(false);
const reportForm = reactive({
  status: 0,
  content: '',
  task_id: '',
  writer_id: cookies.get("id"),
  file: null // 用于存储上传的文件
});

//任务填报规则
const reportRules = {
  status: [{ required: true, message: '请选择任务状态', trigger: 'change' }],
  content: [{ required: true, message: '请填写任务完成情况', trigger: 'blur' }]
};

//创建任务规则
const createTaskRules = {
  name: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
  description: [{ required: false, message: '请输入任务描述', trigger: 'blur' }],
  start_time: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
  end_time: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
  creator_id: [{ required: true, message: '请选择创建人', trigger: 'blur' }],
  appraiser_id: [{ required: true, message: '请选择负责人', trigger: 'blur' }],
  grade: [{ required: true, message: '请填写价值', trigger: 'blur' }],
  priority: [{ required: true, message: '请选择优先级', trigger: 'blur' }],
  weight: [{ required: true, message: '请填写权重', trigger: 'blur' }, {
    validator: (rule, value, callback) => {
      if (Number(value) > taskForm.residual_weight || Number(value) < 0) {
        callback(new Error(`请输入正确值，不可超过：${taskForm.residual_weight}`))
      } else {
        callback()
      }
    },
    trigger: 'change'
  }],
  workload: [{ required: true, message: '请填写工作量', trigger: 'blur' }],
  members: [{ required: true, message: '请选择成员', trigger: 'blur' }]
}

/**
     * 监听用户输入事件：
     * 如果用户输入超过剩余权重，则强制将输入值设为剩余权重
     */
const handleWeightInput = (value) => {
  if (Number(value) > taskForm.residual_weight || Number(value) < 0) {
    taskForm.weight = taskForm.residual_weight
  }
}

//评价任务规则
const evaluateTaskRules = {
  description: [{ required: false, message: '请输入评价', trigger: 'blur' }],
  score: [{ required: true, message: '请填写评分', trigger: 'blur' }],
}

// 获取员工列表
const fetchEmployees = async () => {
  await axios.get('/employee/getEmployeeList')
    .then(response => {
      employees.value = response.data.data || [];
    })
    .catch(error => {
      console.error('Failed to fetch employees:', error);
      ElMessage.error('获取员工列表失败');
    });
};

const getEmployeeName = (id) => {
  const employee = employees.value.find(emp => emp.id === id);
  return employee ? employee.name : null;
};

// 格式化时间为 "YYYY-MM-DD HH:mm"
function formatDateTime(dateTimeString) {
  // 解析时间字符串
  const date = new Date(dateTimeString.replace(' ', 'T') + 'Z');

  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}`;
}

//任务分解弹窗
function openDialog(row) {
  dialogVisible.value = true;

  // 获取当前登录用户的 ID 和名字
  const currentUserID = cookies.get("id");
  const currentUserName = cookies.get("name");

  if (currentUserID && currentUserName) {
    taskForm.creator_id = currentUserID;
    taskForm.creator_name = currentUserName;
  }

  if (typeof (row) != 'undefined') {
    taskForm.parent_id = row.id;
    taskForm.residual_weight = row.taskScheduleVO.residual_weight;

  } else {
    taskForm.residual_weight = projectStore.value.project.projectScheduleVO.residual_weight
  }
}

async function getProjectInformation() {
  projectStore.value = await getProject(params.projectId)
}

//评价任务弹窗
function openEvaluateDialog(row) {
  EvaluateDialogVisible.value = true;

  if (typeof (row) != 'undefined') {
    evaluateTaskForm.id = row.id;
  }
}

// 打开填报弹窗
const openReportDialog = (row) => {
  reportForm.task_id = row.id;
  reportForm.status = row.status; // 如果已有状态，预填充
  reportForm.content = ''; // 清空内容
  reportForm.file = null; // 清空文件
  reportDialogVisible.value = true;

  // 获取当前登录用户的 ID 和名字
  reportForm.writer_id = cookies.get("id");
};

// 提交填报表单
const submitReport = async () => {
  try {
    await reportFormRef.value.validate(async (valid) => {
      if (!valid) return;
      // 更新任务状态
      const response = await axios.post(`/task/done`, reportForm, {
        headers: {
          'Content-Type': 'multipart/form-data' // 确保设置正确的 Content-Type
        }
      });
      if (response.data.code == 200) {
        ElMessage.success(response.data.data);
        reportDialogVisible.value = false;
        // 重新加载任务列表
        await fetchTasks();
      } else {
        ElMessage.error(response.data.message || '任务填报失败，请检查输入信息和权限');
      }
    });
  } catch (error) {
    ElMessage.error('任务填报失败，请检查输入信息和权限');
  }
};

// 关闭填报弹窗
const closeReportDialog = () => {
  reportDialogVisible.value = false;
  if (reportFormRef.value) {
    reportFormRef.value.resetFields();
  }
};

// 处理文件选择
const handleFileChange = (file, fileList) => {
  // 只允许选择一个文件
  if (fileList.length > 0) {
    reportForm.file = fileList[0].raw; // 存储原始文件对象
  } else {
    reportForm.file = null;
  }
};

//刷新
onMounted(async () => {
  await fetchTasks()
  await fetchEmployees(); // 确保在组件挂载时加载员工列表
  await getProjectInformation()
})

//任务详情
const viewDetails = (row) => {
  // row 可能是父任务或子任务
  let formattedDetails = '';

  // 格式化任务基本信息
  formattedDetails += `任务名称: ${row.name}\n`;
  formattedDetails += `描述: ${row.fulltask.task.description || '无描述'}\n`;
  formattedDetails += `创建时间: ${row.fulltask.task.create_time || '无创建时间'}\n`;
  formattedDetails += `开始时间: ${row.start_time || '无开始时间'}\n`;
  formattedDetails += `结束时间: ${row.end_time || '无结束时间'}\n`;
  formattedDetails += `已分配权重: ${row.fulltask.task.assign}\n`;

  // 格式化创建者信息
  formattedDetails += `创建人:`;
  formattedDetails += `${row.creator.name || '无创建人'}\n`;

  // 格式化成员信息
  formattedDetails += `成员:`;
  if (row.members && row.members.length > 0) {
    row.members.forEach((member, index) => {
      // formattedDetails += `成员${index + 1}:`;
      formattedDetails += `${member.name}`;
      if (index !== row.members.length - 1) {
        formattedDetails += `；`;
      }
    });
  } else {
    formattedDetails += `无成员\n`;
  }

  // 更新详情变量
  details.value = formattedDetails;

  // 显示对话框
  detailsDialogVisible.value = true;
};

//创建任务提交
async function submitForm() {
  try {
    // 转换时间格式
    const convertDate = (date) => {
      if (date) {
        const d = new Date(date);
        return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
      }
      return null;
    };
    const members = taskForm.members;

    const taskDTO = {
      task: {
        name: taskForm.name,
        description: taskForm.description,
        start_time: convertDate(taskForm.start_time),
        end_time: convertDate(taskForm.end_time),
        creator_id: taskForm.creator_id,
        appraiser_id: taskForm.appraiser_id,
        grade: taskForm.grade,
        priority: taskForm.priority,
        weight: taskForm.weight,
        workload: taskForm.workload,
        parent_id: taskForm.parent_id,
        project_id: taskForm.project_id,
      },
      members: members
    }

    const taskResponse = await axios.post('/task/create', taskDTO)

    ElMessage.success(taskResponse.data.message)
    dialogVisible.value = false // 关闭弹窗

    // 重新加载任务列表
    await fetchTasks()
    // 清空表单
    resetForm();
  } catch (error) {
    console.error('创建任务失败:', error);
    ElMessage.error('创建任务失败，请检查输入信息和权限');
  }
}

//评价任务提交
async function submitEvaluateForm() {

  try {
    const evaluationDTO = {
      id: evaluateTaskForm.id,
      evaluation: evaluateTaskForm.evaluation,
      score: evaluateTaskForm.score
    }
    const response = await axios.post('/task/evaluate', evaluationDTO)

    ElMessage.success(response.data.message)
    EvaluateDialogVisible.value = false // 关闭弹窗

    // 重新加载任务列表
    await fetchTasks()
    // 清空表单
    resetForm();
  } catch (error) {
    console.error('评价任务失败:', error);
    ElMessage.error('评价任务失败，请检查输入信息和权限');
  }
}

//查看参与任务
async function fetchTasks() {
  try {
    const res = await axios.get('project/involveProject/task', {
      params: {
        pid: params.projectId, // 使用当前项目的ID
        parent: 0, // 获取根任务
        eid: cookies.get("id") // 使用当前用户的ID
      }
    })
    console.log(res);
    // 从响应数据中提取任务列表
    const taskList = res.data.data && res.data.data.list ? res.data.data.list : [];
    // 处理任务列表，并存储在 tasks.value 中
    tasks.value = taskList.map(task => ({
      id: task.task.id, // 确保有 id 属性
      name: task.task.name,
      start_time: formatDateTime(task.task.start_time),// 使用格式化后的时间
      end_time: formatDateTime(task.task.end_time),// 使用格式化后的时间
      status: task.task.status, // 添加任务状态
      fulltask: task,
      creator: task.creator,
      members: task.members,
      taskScheduleVO: task.taskScheduleVO,
      priority: String(task.task.priority),
      description: task.task.description,
      appraiser_id: task.task.appraiser_id,
      grade: task.task.grade,
      performanceVO: task.performanceVO
    }));
  } catch (err) {
    console.error(err);
  }
}

// 根据进度百分比返回不同的颜色
const progressColor = (progress) => {
  if (progress >= 100) return '#67C23A'; // 完成
  else if (progress >= 50) return '#E6A23C'; // 进行中
  else return '#F56C6C'; // 未开始或延迟
};

// 获取优先级的颜色
const getPriorityColor = (priority) => {
  if (priority === '1') return 'danger'; // 高优先级为红色
  if (priority === '2') return 'warning'; // 中优先级为黄色
  if (priority === '3') return 'info'; // 低优先级为蓝色
  return 'info'; // 默认返回蓝色
};

// 根据优先级返回对应的标签文本
const getPriorityLabel = (priority) => {
  if (priority === '1') return '高'; // 高优先级
  else if (priority === '2') return '中'; // 中优先级
  else if (priority === '3') return '低'; // 低优先级
  return '';
};


//查看参与的子任务
async function fetchsubtasks(parent_id) {
  try {
    const res = await axios.get('project/involveProject/task', {
      params: {
        pid: params.projectId, // 使用当前项目的ID
        parent: parent_id, // 获取根任务
        eid: cookies.get("id") // 使用当前用户的ID
      }
    })
    console.log(res);
    // 从响应数据中提取任务列表
    const taskList = res.data.data && res.data.data.list ? res.data.data.list : [];
    // 处理任务列表，并存储在 subtasks 对象中，使用 parent_id 作为 key
    subtasks.value[parent_id] = taskList.map(task => ({
      id: task.task.id, // 确保有 id 属性
      name: task.task.name,
      start_time: formatDateTime(task.task.start_time),// 使用格式化后的时间
      end_time: formatDateTime(task.task.end_time),// 使用格式化后的时间
      fulltask: task,
      creator: task.creator,
      members: task.members,
      taskScheduleVO: task.taskScheduleVO,
      priority: task.task.priority,
      description: task.task.description,
      appraiser_id: task.task.appraiser_id,
      grade: task.task.grade,
      performanceVO: task.performanceVO
    }));
  } catch (err) {
    console.error(err);
  }
}

//重置输入
function resetForm() {
  // 清空成员数组
  taskForm.members = [];
}
</script>


<style scoped>
.subtask-table {
  margin: 10px 0 10px 40px;
  background: #f8f9fa;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.05);
}

.subtask-table .el-table__row {
  background: #f8f9fa;
}

.el-dialog__header {
  background-color: #f9fafb;
}

.el-dialog__body {
  padding: 20px;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-dialog__footer {
  padding: 20px;
  text-align: right;
}

.el-dialog__title {
  color: #4a5568;
}

form.el-form.el-form--default.el-form--label-right.demo-ruleForm {
  margin-top: 8px;
  margin-right: 10px;
}

button.el-button.el-button--primary,
button.el-button {
  width: 10%;
  border-radius: 10px;
}


/* 调整箭头按钮样式 */
.el-button.is-circle {
  padding: 6px;
  transition: transform 0.3s;
}

.el-button.is-circle[aria-expanded="true"] {
  transform: rotate(90deg);
}

.details-pre {
  background-color: #f8f8f8;
  /* 浅色背景 */
  border: 1px solid #eee;
  /* 边框 */
  border-radius: 4px;
  /* 圆角 */
  padding: 16px;
  /* 内间距 */
  color: #333;
  /* 文字颜色 */
  font-family: "Consolas", "Monaco", "Courier New", monospace;
  /* 等宽字体可读性更好 */
  line-height: 1.6;
  /* 行距 */
  white-space: pre-wrap;
  /* 允许自动换行 */
  word-wrap: break-word;
  max-height: 400px;
  /* 最高高度，避免过长 */
  overflow-y: auto;
  /* 超过高度时滚动 */
}

.dialog-footer {
  text-align: right;
}

/* 自定义上传按钮样式 */
.custom-upload-button {
  width: 100%;
  /* 确保按钮宽度占满容器 */
  text-align: center;
  /* 居中对齐文字 */
  padding: 12px 24px;
  /* 调整内边距以确保内容居中 */
  font-size: 12px;
  /* 设置字体大小 */
  border-radius: 8px;
  /* 圆角效果 */
  background-color: #409eff !important;
  /* 强制设置背景色 */
  border-color: #409eff !important;
  /* 强制设置边框颜色 */
  color: #ffffff;
  /* 文字颜色为白色 */
  transition: background-color 0.3s ease, transform 0.3s ease;
  /* 添加过渡效果 */
}

.custom-upload-button:hover {
  background-color: #66b1ff !important;
  /* 悬停时背景色加深 */
  transform: scale(1.05);
  /* 悬停时放大效果 */
}

/* 上传提示文字样式 */
.el-upload__tip {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
}

/* 添加创建项目的按钮样式 */
.create-task-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

/* 查看任务详情的弹窗样式 */
.details-pre {
  white-space: pre-wrap;
  word-break: break-all;
  font-family: "Arial", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #4a5568;
  background-color: #f9fafb;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.task-table {
  margin-bottom: 20px;
}

.el-table {
  border: 1px solid #ddd;
  margin-bottom: 20px;
}

.el-table th,
.el-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

.el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.create-task-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}
</style>